<template>
    <a-modal v-model:visible="visible" title="注册" @cancel="resetFields" :footer="null" >
      <a-form
        :label-col="formLayout.labelCol"
        :wrapper-col="formLayout.wrapperCol"
      >
        <a-form-item label="邮箱" v-bind="validateInfos.email">
          <a-input v-model:value="regModelRef.email" />
        </a-form-item>
        <a-form-item label="用户名" v-bind="validateInfos.username">
          <a-input v-model:value="regModelRef.username" />
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password">
          <a-input-password  v-model:value="regModelRef.password" />
        </a-form-item>
        <a-form-item label="验证码" v-bind="validateInfos.code">
          <a-input v-model:value="regModelRef.code" style="width: 180px" /> <a-button type="link" :disabled="Boolean(intervalTimer)" @click="handleEmailCode">{{ intervalTimer ? codeCount + '秒后重发' : '获取验证码' }}</a-button>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" :loading="loading" @click="handleRegister" block shape="round" style="height: 40px;">确认</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script setup>
import  { ref, reactive } from 'vue'
import { Form } from 'ant-design-vue';
import { getEmailCode, registerUser } from '@/api/login/index.js';
import { message } from 'ant-design-vue';

let loading = ref(false)
let visible = ref(false)
let intervalTimer = ref(null)
let codeCount = ref(60)
const showRegisterModal = () => {
  visible.value = true
}
const formLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  }
}
const useForm = Form.useForm
const rulesRef = reactive({
  email: [
    {
      required: true,
      message: '请填写邮箱',
    },
    {
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: '请填写正确的邮箱',
    }
  ],
  username: [
    {
      required: true,
      message: '请填写昵称',
    },
  ],
  password: [
    {
      required: true,
      message: '请填写密码',
    },
  ],
  code: [
    {
      required: true,
      message: '请填写验证码', 
    }
  ]
})
const regModelRef = reactive({
  email: '',
  username: '',
  password: '',
  code: ''
})
// 开始验证码倒计时
const startCountDown = () => {
  intervalTimer.value = setInterval(() => {
    codeCount.value -= 1
    if (codeCount.value === 0) {
      codeCount.value = 60
      clearInterval(intervalTimer.value)
      intervalTimer.value = null
    }
  }, 1000)
}
// 注册
const handleRegister = () => {
  validate()
  .then(
    loading.value = true,
    registerUser(regModelRef)
    .then(res => {
      loading.value = false
      message.success('注册成功')
      visible.value = false
    })
    .catch(err => {
      message.error( err || '注册失败')
    })
    .finally(() =>
      loading.value = false
    )
  )

}
// 获取邮箱验证码
const handleEmailCode = () => {
  if (!regModelRef.email) {
    return message.error('请填写邮箱')
  }
  startCountDown()
  getEmailCode({ email:  regModelRef.email})
  .then(res => {
    if(res.message === '邮箱已注册') {
      return message.error('邮箱已注册')
    }
  })
}
const { resetFields, validate, validateInfos } = useForm(regModelRef, rulesRef)
// 暴露方法给父组件
defineExpose({
  showRegisterModal
})
</script>